<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>使用Props传递数据</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
  <style>
  .component {
    text-align: center;
    color: #42b983;
    font-size: 28px;
    font-family: "微软雅黑";
  }
  </style>
</head>

<body>
<h1>基础用法</h1>
  <div id="example">
    <!-- 使用注册的组件模板 -->
    <!-- HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）： -->
    <child message="Hello Vue.js！" hint-test="我是hint"></child>
  </div>
  <div id="example-1">
  <input type="text" v-model="message">
    <test-demo :parent-msg="message"></test-demo>
    <!-- <child v-bind:test-demo="parentMsg"></child> -->
  </div>
  <script type="text/javascript">
  // 注册全局组件,注册组件要在最开始就注册
  Vue.component('child', {
    props:["message","hintTest"],
    template: "<span class='component'>{{message}} {{hintTest}}</span>"
  });
  // 局部注册组件
  var textdemo = {
    props:['parentMsg','message'],
    template:"<span>{{parentMsg}}</span>"

  }
  // new一个vue对象
  var example = new Vue({
    el: "#example"
  });

  var example_1 = new Vue({
    el:"#example-1",
    components:{
      'test-demo':textdemo
    }

  });
  </script>
</body>

</html>
